<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="./css/mui.min.css" rel="stylesheet">

		<style>
			.mui-media {
				font-size: 14px;
			}
			
			#dateLayout {
				height: 70px;
				background: #3A46A1;
				padding-bottom: 15px;
				padding-top: 15px;
				float: left;
				width: 100%;
				overflow: hidden;
				position: relative;
				background-position: center;
			}
			
			#fromDate {
				background: #3A46A1;
				background: rgba(0, 0, 0, 0.20);
				box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.15);
				border-radius: 100px;
				height: 40px;
				width: 44%;
				margin-left: 4%;
				float: left;
				line-height: 40px;
			}
			
			#fromDateTime {
				font-size: 14px;
				color: #FFFFFF;
				margin-left: 16px;
				float: left;
			}
			
			#toDate {
				background: #3A46A1;
				background: rgba(0, 0, 0, 0.20);
				box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.15);
				border-radius: 100px;
				height: 40px;
				width: 44%;
				margin-right: 4%;
				float: right;
				line-height: 40px;
			}
			
			#toDateTime {
				font-size: 14px;
				color: #FFFFFF;
				margin-left: 16px;
				float: left;
			}
			
			#dowmImg {
				width: 24px;
				height: 24px;
				float: right;
				margin-right: 8px;
				margin-top: 8px;
			}
			
			#orderEdit {
				height: 45px;
				background: #FFFFFF;
				float: left;
				width: 94%;
				margin-bottom: 15px;
				margin-top: 15px;
				margin-left: 3%;
				margin-right: 3%;
				border-radius: 100px;
			}
			
			#filterBtn {
				margin-right: 3%;
				background: #FFFFFF;
				float: right;
				z-index: 1000;
				position: absolute;
				right: 0px;
				top: 15px;
				border: 1px solid #CDCDD6;
				border-radius: 100px;
				height: 45px;
				width: 90px;
				font-size: 14px;
				color: #32325A;
			}
			
			.mui-table-view:before,
			.mui-table-view:after {
				height: 0;
			}
			
			.mui-content>.mui-table-view:first-child {
				margin-top: 1px;
			}
		</style>

	</head>

	<body>

		<header class="mui-bar mui-bar-nav" style="background: #3A46A1;">
			<button id="menu" type="button" class="mui-btn  mui-btn-link mui-btn-nav mui-pull-right" style="color: #FFFFFF;">
					<span class="mui-icon mui-icon-bars"></span>
			</button>
			<h1 class="mui-center mui-title" style="color: #FFFFFF; font-size: 20px; font-weight: bolder;">SAGAWA</h1>
		</header>

		<div class="mui-content">

			<div id="dateLayout" class="mui-slider">

				<div id="fromDate">
					<p id="fromDateTime">2017-05-01</p>
					<img id="dowmImg" src="images/down.png" />
				</div>

				<div id="toDate">
					<p id="toDateTime">2017-05-01</p>
					<img id="dowmImg" src="images/down.png" />
				</div>

			</div>

			<div style="background-image: linear-gradient(-1deg, rgba(250,250,250,0.00) 0%, rgba(0,60,140,0.30) 100%); width: 100%; height: 1px;"></div>

			<div class="mui-slider" style=" width: 100%; background-color: #EDECEB;">

				<input id="orderEdit" type="text" placeholder="Order number or Vehicle number">
				<button id="filterBtn" class="mui-btn">FILTER</button>

			</div>

		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/vue.min.js"></script>
		<script type="text/javascript">
			(function($, doc) {

				mui.init({
					subpages: [{
						url: 'orderList.html',
						id: 'orderList.html',
						styles: {
							top: '190px', //mui标题栏默认高度为45px；
							bottom: '0px' //默认为0px，可不定义；
						}
					}]
				});

				mui.plusReady(function() {
					//关闭等待框
					plus.nativeUI.closeWaiting();
					//显示当前页面
					mui.currentWebview.show();
				});

				var selectFromDate = 1;
				var selectToDate = 2;
				var startPage = 1;

				var fromDate = doc.getElementById("fromDate");
				var toDate = doc.getElementById("toDate");
				var fromDateTime = doc.getElementById('fromDateTime');
				var toDateTime = doc.getElementById('toDateTime');
				var menuBtn = doc.getElementById("menu");
				var orderEdit = doc.getElementById("orderEdit");
				var filterBtn = doc.getElementById("filterBtn");

				var date = new Date();
				toDateTime.innerText = dateToStr(date);
				date.setDate(1);
				fromDateTime.innerText = dateToStr(date);

				menuBtn.addEventListener('tap', function(event) {
					showActionSheet();
				});

				fromDate.addEventListener('tap', function(event) {
					pickDate(selectFromDate);
				});

				toDate.addEventListener('tap', function(event) {
					pickDate(selectToDate);
				});

				var listPage = null;
				filterBtn.addEventListener("tap", function(event) {

					if(!listPage) {
						listPage = plus.webview.getWebviewById('orderList.html');
					}
					//触发列表页面的刷新事件
					mui.fire(listPage, 'refrshOrderList', {
						fromDate: fromDateTime.innerText,
						toDate: toDateTime.innerText,
						keyWord: orderEdit.value.trim()
					});

				});

				orderEdit.onpropertychange = function() {
					var inputStr = orderEdit.value;
					console.log("输入框------> " + inputStr);

					if(!listPage) {
						listPage = plus.webview.getWebviewById('orderList.html');
					}
					mui.fire(listPage, 'refrshKeyWord', {
						keyWord: inputStr
					});
				};

				orderEdit.oninput = function() {
					var inputStr = orderEdit.value;
					console.log("输入框------> " + inputStr);

					if(!listPage) {
						listPage = plus.webview.getWebviewById('orderList.html');
					}
					mui.fire(listPage, 'refrshKeyWord', {
						keyWord: inputStr
					});
				};

				function showActionSheet() {
					var bts = [{
						title: "Password"
					}, {
						title: "Profile"
					}, {
						title: "Logout"
					}];
					plus.nativeUI.actionSheet({
							cancel: "Cancel",
							buttons: bts
						},
						function(e) {

							if(e.index <= 0) {
								return;
							}
							switch(e.index) {
								//修改密码
								case 1:
									break;
									//上传图片
								case 2:
									selectImage();
									break;
									//退出
								case 3:
									break;
							}

						}
					);
				};

				function selectImage() {
					mui.openWindow({
						id: 'selectImage',
						url: 'selectImage.html'
					});
				};

				function pickDate(type) {

					plus.nativeUI.pickDate(function(e) {
						var d = e.date;
						console.log("选择的日期：" + d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate());
						switch(type) {
							case selectFromDate:
								fromDateTime.innerText = dateToStr(d);
								break;
							case selectToDate:
								toDateTime.innerText = dateToStr(d);
								break;
						}

					}, function(e) {
						console.log("未选择日期：" + e.message);
					});
				};

				function dateToStr(d) {
					return(d.getFullYear() + "-" + ultZeroize(d.getMonth() + 1) + "-" + ultZeroize(d.getDate()));
				};

				function ultZeroize(v, l) {
					var z = "";
					l = l || 2;
					v = String(v);
					for(var i = 0; i < l - v.length; i++) {
						z += "0";
					}
					return z + v;
				};

			}(mui, document));
		</script>

	</body>

</html>